Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Highlight the header of the topmost Window #3515

Merged
merged 18 commits into from
Jan 7, 2024

Conversation

GuillaumeSchmid
Copy link
Contributor

@GuillaumeSchmid GuillaumeSchmid commented Oct 30, 2023

This PR replaces an old one with many problems (no collapse icon, the header background was not funny colored, ugly...). It fixes those problems.

It implements the highlight of the header to the focused window. And allows the rest of the application to know the selected window. It allows, for instance, to display multiple windows with images and some additional meta information about those images on the side panel of the main window. The side panel updates itself according to the selected image window.

  • Added a theme color for the selected window header.
  • Added a function to retrieve the LayerId of the focused window.
  • Implemented a simple demo of this function in the demo app where a message states if the Option window is focused (at the bottom of the Options window).

Capture d’écran du 2023-10-30 10-30-39

A technical point:
The header color is applied with a transparency of 125 so the collapsible button becomes visible.
The reason is that the collapsible button is rendered before the rest of the header and before the header size is known.
We cannot draw the background before knowing this value, so rendering with transparency is a solution to see the collapsible button through the header background.

This PR has been sponsored by my company, which left me to do it during my work time.
This is part of an evil plan to convince them to switch to rust for new projects :)

You can turn this off with Visuals.window_highlight_topmost

* Added a theme color for selected window header.
* Added a function to retrieve the LayerId of the focused window.
* Implemented a simple demo of this function in the demo app where a message states if the Option window is focused (at the bottom of the Options window).
@GuillaumeSchmid GuillaumeSchmid changed the title Implemented window header color changed when focused (on top). Implemented window header color change when focused (on top). Nov 2, 2023
@emilk
Copy link
Owner

emilk commented Nov 10, 2023

This PR has been sponsored by my company, which left me to do it during my work time.
This is part of an evil plan to convince them to switch to rust for new projects :)

I fully support your plan :)

@emilk
Copy link
Owner

emilk commented Nov 10, 2023

A technical point:
The header color is applied with a transparency of 125 so the collapsible button becomes visible.
The reason is that the collapsible button is rendered before the rest of the header and before the header size is known.
We cannot draw the background before knowing this value, so rendering with transparency is a solution to see the collapsible button through the header background.

There is a way to work around this! If you use this pattern:

let where_to_put_header_background = ui.painter().add(Shape::Noop);

// paint the collapsible button and figure out size of window…

ui.painter().set(
    where_to_put_header_background,
    epaint::RectShape::filled(),
);

@emilk
Copy link
Owner

emilk commented Nov 10, 2023

We should pick a nomenclature and stick with it.

In the demo you use "focus", which is already used in the context of "keyboard focus" (press tab to move keyboard focus, which doesn't change what window is on top).

I think "top" is the best word to use, as it is the most accurate.

crates/egui/src/memory.rs Outdated Show resolved Hide resolved
Copy link
Owner

@emilk emilk left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Instead of adding yet another color, could we reuse an existing one, e.g. visuals.widgets.hovered.bg_fill?

The visual style is usually more relaxing when there is a limited pallett of colors

crates/egui_demo_lib/src/demo/window_options.rs Outdated Show resolved Hide resolved
crates/egui/src/style.rs Outdated Show resolved Hide resolved
@emilk emilk added the egui label Nov 10, 2023
crates/egui/src/context.rs Outdated Show resolved Hide resolved
@emilk emilk merged commit 1777bb7 into emilk:master Jan 7, 2024
19 checks passed
@emilk emilk changed the title Implemented window header color change when focused (on top). Highlight the header of the topmost Window Jan 8, 2024
@tmtbe
Copy link

tmtbe commented Jan 12, 2024

There is a bug. When switching between dark and light tones, the setting of window_highlight_topmost will be set to true again.

@GuillaumeSchmid
Copy link
Contributor Author

Could you please add the exact steps or the code to reproduce the problem, as well as the expected output and what you get on your side?
Thanks!

@margual56
Copy link

margual56 commented Feb 4, 2024

This PR had the following result when updating to the latest version of egui:

Before After
image image

Is this a bug or am I missing something?

// Calculate roughly how much larger the window size is compared to the inner rect
let title_bar_height = if with_title_bar {
let style = ctx.style();
ctx.fonts(|f| title.font_height(f, &style)) + title_content_spacing * 2.0
Copy link

@margual56 margual56 Feb 4, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This (the * 2.0) is the culprit. When set to 1.0, the result is the expected one:

image

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm curious why only your window is broken, and no other one on egui.rs

Maybe you can make a PR to fix it?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants